<!--菜单授权管理-->
<!-- 王磊__2018.11.27-->
<template>
    <div class="ct-bodySet">
        <el-container>
            <el-header class="bgclr-dk-sp0 mb20 headerCoster">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/mainPage/welcome' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>角色权限管理</el-breadcrumb-item>
                    <el-breadcrumb-item><span class="main-Clr-ft">菜单授权管理</span></el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>

            <el-container class="pl20 pr20" style="display: flex">
                <el-card class="autoHeight mr15 cardWidthLeft">
                    <div slot="header">
                        <span>角色列表</span>
                    </div>
                    <el-tree :data="roleTreeData"
                             ref="roleTreeData"
                             :props="roleTreeDataProps"
                             default-expand-all
                             :expand-on-click-node="false"
                             :highlight-current="true"
                             node-key="id"
                             @node-click="clickLeftTreeNode">
                        <span slot-scope="{ node, data }">
                            <span class="tx-Elps" :title="node.label" >{{ node.label }}</span>
                        </span>
                    </el-tree>
                </el-card>

                <el-card class="autoHeight cardWidth" style="flex:1">
                    <div slot="header">
                        <span>
                            <span class="main-Clr-ft mr2">{{roleName}}</span>
                            菜单列表
                        </span>
                        <span class="fltRt ml15 cardButton">
                            <el-button size="small" @click="resetForm" class="bkmgColor"><div class="ft12p">重置</div></el-button>
                        </span>
                        <span class="fltRt cardButton">
                            <el-button size="small" @click="submitForm" type="primary"><div class="ft12p">提交</div></el-button>
                        </span>
                    </div>
                    <el-tree :data="memuTreeData"
                             ref="memuTreeData"
                             :props="memuTreeDataProps"
                             default-expand-all
                             :expand-on-click-node="false"
                             node-key="id"
                             show-checkbox>
                    </el-tree>
                </el-card>
            </el-container>
            <div class="bottomLayoutBus"></div>
        </el-container>
    </div>

</template>

<script>
    import urlConfig from '../../../config/url.json';
    import Vue from 'vue';
    import { Message } from 'element-ui';

    Vue.component(Message.name, Message);

    let roleUrl = urlConfig.roleManage;                        //角色管理接口
    let menuUrl = urlConfig.menuManage;                        //菜单管理接口
    let role_refUrl = urlConfig.roleRfMenu;                        //角色-菜单相关接口


    export default {
        data(){
            return{
                allPermiList:[],
                selectFlag:true,
                roleID:'',
                roleName:'',
                roleTreeData : [],//角色列表
                roleTreeDataProps:{
                    children: 'children',
                    label: 'roleName',
                },
                memuTreeData : [],//菜单列表
                memuTreeDataProps:{
                    children: 'children',
                    label: 'name',
                },

            }
        },
        methods:{
            //重置
            resetForm(){
                this.$refs.memuTreeData.setCheckedKeys([]);
            },
            //提交
            submitForm(){
                debugger;
                let that=this;
                let permissionIdList=new Array();
                let quanxuan=that.$refs.memuTreeData.getCheckedKeys();
                permissionIdList=permissionIdList.concat(quanxuan);
                // let banxuan=that.$refs.memuTreeData.getHalfCheckedKeys();
                // permissionIdList=permissionIdList.concat(banxuan);
                const loading = that.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                that.$http({
                    method: 'post',
                    url: role_refUrl,
                    baseURL:'/api',
                    data:{
                        roleId:that.roleID,
                        permissionIdList:permissionIdList
                    }
                }).then(function(response){
                    debugger;
                    if(response.data.code>199 && response.data.code<400) {
                        if(!response.data.data){
                            return;
                        }

                        Message.success('修改'+that.roleName+'菜单成功');
                        that.getRoleMenu(that.roleID);
                    }else{
                        Message.error('修改'+that.roleName+'菜单失败');
                    }
                    loading.close();
                }).catch(function(err){
                    Message.error('修改'+that.roleName+'菜单失败');
                    console.log(err);
                    loading.close();
                });
            },

            //点击左侧树节点
            clickLeftTreeNode(data){
                let that=this;
                that.roleName=data.roleName;
                that.getRoleMenu(data.id);
            },

            //获取角色所拥有的菜单列表
            getRoleMenu(id){
                let that=this;
                let rolePermiList=[];                                        //获取角色所拥有的菜单permissionId
                let rightMenuTree=that.$refs.menuTree;                       //获取右侧菜单树
                that.roleID=id;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                this.$http({
                    method: 'get',
                    url: role_refUrl,
                    baseURL:'/api',
                    params: {
                        roleId : id
                    }
                }).then(function(response){
                    if(response.data.code>199 && response.data.code<400) {
                        debugger;
                        if(!response.data.data){
                            return;
                        }

                        let roleMenuList=response.data.data.menuInfos;
                        for(let i=0;i<roleMenuList.length;i++){
                            rolePermiList.push(roleMenuList[i].id)
                        }
                        that.$refs.memuTreeData.setCheckedKeys(rolePermiList,false);

                    }else{
                        Message.error('获取失败');
                    }
                    loading.close();
                }).catch(function(err){
                    Message.error('获取失败');
                    console.log(err);
                    loading.close();
                });
            },

            //获取角色列表
            getRoleTreeData(){
                let that=this;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                this.$http({
                    method: 'get',
                    url: roleUrl,
                    baseURL:'/api'
                }).then(function(response){
                    if(response.data.code>199 && response.data.code<400) {
                        if(!response.data.data){
                            return;
                        }
                        let newdata=response.data.data.roleInfos;
                        let getJsonTree=function(newdata,parentId){
                            let itemArr=[];
                            for(let i=0;i<newdata.length;i++){
                                let node=newdata[i];
                                if(node.parentId==parentId ){
                                    let newNode={id:node.id,
                                        roleName:node.roleName,
                                        parentId:node.parentId,
                                        description:node.description,
                                        createBy:node.createBy,
                                        createDate:node.createDate,
                                        updateBy:node.updateBy,
                                        updateDate:node.updateDate,
                                        children:getJsonTree(newdata,node.id)};
                                    itemArr.push(newNode);
                                }
                            }
                            return itemArr;
                        };

                        that.roleTreeData=getJsonTree(newdata,'-1');

                    }else{
                        Message.error('获取失败');
                    }
                    loading.close();
                }).catch(function(err){
                    Message.error('获取失败');
                    console.log(err);
                    loading.close();
                });
            },

            //获取菜单列表
            getMenuTreeData(){
                let that=this;
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                });
                this.$http({
                    method: 'get',
                    url: menuUrl,
                    baseURL:'/api'
                }).then(function(response){
                    if(response.data.code>199 && response.data.code<400) {
                        if(!response.data.data){
                            return;
                        }
                        let newdata1=response.data.data.menuInfos;
                        that.allPermiList=[];
                        for(let j=0;j<newdata1.length;j++){
                            that.allPermiList.push(newdata1[j].permissionId);
                        }
                        let getJsonTree=function(newdata1,parentId){
                            let itemArr=[];
                            for(let i=0;i<newdata1.length;i++){
                                let node=newdata1[i];
                                if(node.parentId==parentId ){
                                    let newNode={id:node.id,
                                        name:node.name,
                                        path:node.path,
                                        orderId:node.orderId,
                                        icon:node.icon,
                                        description:node.description,
                                        parentId:node.parentId,
                                        permissionId:node.permissionId,                         //增加/删除角色-菜单关联时用到     服务器还没加
                                        children:getJsonTree(newdata1,node.id)};
                                    itemArr.push(newNode);
                                }
                            }
                            return itemArr;
                        };

                        that.memuTreeData=getJsonTree(newdata1,'-1');
                    }else{
                        Message.error('获取失败');
                    }
                    loading.close();
                }).catch(function(err){
                    Message.error('获取失败');
                    console.log(err);
                    loading.close();
                });
            },


        },
        mounted(){
            let that = this;
            //获取角色列表
            that.getRoleTreeData();
            //获取菜单列表
            that.getMenuTreeData();



            //获取默认角色的名称
            let defaultRole=new Object();
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
            });
            this.$http({
                method: 'get',
                url: roleUrl,
                baseURL:'/api',
                params: {
                    id : 10001,
                }
            }).then(function(response){
                if(response.data.code>199 && response.data.code<400) {
                    if(!response.data.data){
                        return;
                    }
                    defaultRole=response.data.data.roleInfos[0];
                    that.roleName=response.data.data.roleInfos[0].roleName;
                    that.getRoleMenu(defaultRole.id);
                }
                loading.close();
            }).catch(function(err){
                console.log(err);
                loading.close();
            });

        },
        updated(){
            if(this.selectFlag){
                //页面加载完成左侧树默认选中超级管理员1
                this.$refs.roleTreeData.setCurrentKey(10001);
                this.selectFlag=false;
            }
        }
    }
</script>

<style scoped>
    .headerCoster{
        height: 59px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
    }

    .cardButton{
        font-size: 12px;
        line-height: 51px;
        margin-top: -19px;
    }

    .cardWidth{
        width: 100%;
    }

    .cardWidthLeft{
        width: 40%;
    }
</style>